<style scoped>
  .line{
    display: flex;
    align-items: center;
    .label{
      width:100px
    }
  }
</style>
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 展示 ：名称  标识（分销商，渠道商，批发商） ak sk  到期时间   可用余额  管理员账户 密码  授信额度  可用授信额度
      功能：修改功能  ak sk  密码
      <div>名称：满100减20购物券</div>
      <div>标识：{{type}}</div>
      <div>ak：ak</div>
      <div>sk：sk</div>
      <div>到期时间：2012/12/12 12:12:12</div>
      <div>可用余额(￥)：1000</div>
      <div>管理员账户：admin</div>
      <div>密码：123456</div>
      <div>授信额度：10000</div>
      <div>可用授信额度：10000</div> -->
      <a-form ref="createModal" :form="form" v-bind="formLayout">
          <a-form-item v-show="model && model>0" label="主键ID">
            <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
          </a-form-item>
          <a-form-item label="商户名">
            <a-input v-decorator="['name', {rules: [{required: true, message: '请输入商户名'}]}]" />
          </a-form-item>
          <a-form-item label="标识">
             <a-select disabled
              placeholder="请选择"
              show-search
              option-filter-prop="type"
              v-decorator="['type', {rules: [{required: true, message: '请选择商户标识'}]}]"
            >
              <a-select-option :value="1">分销商</a-select-option>
              <a-select-option :value="2">渠道商</a-select-option>
              <a-select-option :value="3">批发商</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="ak">
            <a-input disabled v-decorator="['ak', {rules: [{message: '请输入ak'}]}]" />
          </a-form-item>
          <a-form-item disabled label="sk">
           <div class="line">
             <a-input style="width: 400px;" disabled v-decorator="['sk', {rules: [{message: '请输入sk'}]}]" />
             <a style="margin-left: 10px;">重置</a>
           </div>
          </a-form-item>
          <a-form-item label="授信额度(￥)">
            <a-input disabled v-decorator="['credit_line', {rules: [{required: true, message: '请输入授信额度'}]}]" />
          </a-form-item>
          <a-form-item label="可用授信额度(￥)">
            <a-input disabled v-decorator="['acredit_line', {rules: [{required: true, message: '请输入可授信额度'}]}]" />
          </a-form-item>
          <a-form-item label="可用余额(￥)">
            <a-input disabled v-decorator="['available_balance', {rules: [{required: true, message: '请输入可用余额'}]}]" />
          </a-form-item>
          <a-form-item label="账号">
            <a-input disabled v-decorator="['username', {rules: [{required: true, message: '请输入管理员账号'}]}]" />
          </a-form-item>
          <a-form-item label="密码">
            <a-input type="password" v-decorator="['password', {rules: [{required: true, message: '请输入密码'}]}]" />
          </a-form-item>
          <a-form-item label="到期时间">
            <a-date-picker disabled v-decorator="['endtime', {rules: [{required: true, message: '请输入sk'}]}]"/>
          </a-form-item>
          <!-- <a-form-item label="联系人姓名">
            <a-input v-decorator="['contacts', {rules: [{required: true, message: '请输入姓名'}]}]" />
          </a-form-item>
          <a-form-item label="联系人手机号">
            <a-input v-decorator="['mobile', {rules: [{required: true, message: '请输入手机号'}]}]" />
          </a-form-item>
          <a-form-item label="身份证号">
            <a-input v-decorator="['idcard', {rules: [{required: true, message: '请输入身份证号'}]}]" />
          </a-form-item>
          <a-form-item label="收件地址">
            <a-input v-decorator="['address', {rules: [{required: true, message: '请输入收件地址'}]}]" />
          </a-form-item> -->
          <div style="display: flex; justify-content: center;">
            <a-button type="primary" @click="submit">保存</a-button>
          </div>
            
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import pick from 'lodash.pick'
// 表单字段
const fields = ['id', 'name','merchants', 'endtime', 'type','username', 'password',
'credit_line', 'acredit_line', 'available_balance','ak','sk',
'contacts','mobile','idcard','address']

export default {
  name: 'informations',
  components: {
    // CreateForm,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      labelCol:{lg: {span: 9}, sm: {span: 9}},
      wrapperCol:{lg: {span: 24}, sm: {span: 24} },
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13 }
        }
      },
      model:{},
    }
  },
  computed: {
    
  },
  created() {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    this.getMerchantItem()
  },
  methods: {
    // 创建
    submit () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          if (values.id > 0) {
            // 修改 e.g.
            
          } else {
            // 新增
            values.acredit_line = values.credit_line
          }
          this.$api.MerchantSave(values).then(res => {
            if( res.ret == 200 ) {
              this.confirmLoading = false
              this.$message.success('操作成功')
            } else {
              this.confirmLoading = false
            }
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    getMerchantItem() {
      const params = {
        id: localStorage.getItem('merchant_id')
      }
      this.$api.MerchantItem(params).then(res=>{
        console.log("getMerchantItem",res)
        this.model = res.data
        this.model.password = ''
        this.model && this.form.setFieldsValue(pick(this.model, fields))
        console.log("this.model",this.model)
      })
    }
  }
}
</script>
